<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ----------------------------------- 
         * ## go top
         * ----------------------------------- */
        .ss-go-top {
            position: fixed;
            /*bottom: 40px;*/ /* 初始位置在视窗外 */
            right: 20px;
            background-color: #f89408;
            color: #fff;
            padding: 15px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 50%;
            z-index: 1000;
            transition: bottom 2s ease-in-out, opacity 2s ease-in-out;
        }

        .ss-go-top svg {
            width: 32px;
            height: 32px;
        }

        .ss-go-top svg path {
            fill: white;
        }

        .ss-go-top.visible {
            bottom: 40px; /* 可见状态，移动到视窗内 */
            opacity: 1;
        }

        /* 动画效果 */
        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(100%);
                opacity: 0;
            }
        }

        .slideDown {
            animation-name: slideDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards; /* 保持动画结束状态 */
        }

        .slideUp {
            animation-name: slideUp;
            animation-duration: 0.5s;
            animation-fill-mode: forwards; /* 保持动画结束状态 */
        }
    </style>
</head>
<body>

    <!-- 页面内容 -->
    <div style="width: 100%;height:30px;background-color: black;color: #fff;text-align: center;">这是导航区域</div>
    <div style="width: 100%;height:2000px;background-color: #f0f0f0;">这是内容区域</div>

    <!-- 返回顶部按钮 -->
    <div class="ss-go-top" onclick="window.scrollTo({ top: 0, behavior: 'smooth' }); this.classList.add('slideUp');">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
            <path d="M6 4h12v2H6zm5 10v6h2v-6h5l-6-6-6 6z"></path>
        </svg>

    <script>
        // 监听滚动事件，当页面滚动到一定距离时显示返回顶部按钮
        window.addEventListener('scroll', function() {
            if (window.scrollY > 100) {
                const goTopBtn = document.querySelector('.ss-go-top');
                goTopBtn.classList.remove('slideUp');
                goTopBtn.classList.add('visible', 'slideDown');
            } else {
                const goTopBtn = document.querySelector('.ss-go-top');
                goTopBtn.classList.remove('visible', 'slideDown');
            }
        });
    </script>

</body>
</html>